<template>
  <div class="goods-detail">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
      size="medium"
    >
      <el-form-item label="商品名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="商品别称" prop="french">
        <el-input v-model="ruleForm.french"></el-input>
      </el-form-item>
      <el-form-item label="商品分类" prop="bcname">
        <el-select v-model="ruleForm.bcname" placeholder="请选择商品类别">
          <el-option
            :label="item"
            :value="item"
            v-for="(item, index) in items"
            :key="index"
            align="center"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品价格" prop="price">
        <el-input v-model="ruleForm.price"></el-input>
      </el-form-item>
      <el-form-item label="商品图片" prop="price">
        <el-upload
          class="avatar-uploader"
          action=""
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="ruleForm.img" :src="ruleForm.img" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="商品描述" prop="chineseBrief">
        <el-input type="textarea" v-model="ruleForm.chineseBrief"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >立即创建</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "addGoods",
  data() {
    return {
      items: ["蛋糕", "面包", "小食", "配件"],
      ruleForm: {
        name: "",
        french: "",
        bcname: "",
        chineseBrief: "",
        price: "",
        img: "http://lc-hyBuikQD.cn-n1.lcfile.com/RPzJLk7kb1FFfTj1DodfmgYxOBperUFA/4dfb4c839b4715f44edc143a846fcae351f364d7c7c45963f.jpg",
      },
      rules: {
        name: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
          {
            min: 1,
            max: 15,
            message: "长度在 1 到 15 个字符",
            trigger: "blur",
          },
        ],
        region: [
          { required: true, message: "请选择商品类别", trigger: "change" },
        ],
        price: [{ required: true, message: "请输入价格", trigger: "blur" }],
        chineseBrief: [
          { required: true, message: "请填写商品描述", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    let id = this.$route.params.objectId;
    if (id) this.detailInit(id);
  },
  methods: {
    detailInit(id) {
      this.$H.get(`/1.1/classes/classify/${id}`).then((res) => {
        console.log("res", res);
        this.ruleForm = res.data;
      });
    },
    submitForm(formName) {
      let id = this.$route.params.objectId;
      const { name, french, bcname, chineseBrief, price } = this.ruleForm;
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          if (!id) {
            //新增商品
            let res = await this.$H.post(
              "/1.1/classes/classify",
              this.ruleForm
            );
            this.$message({
              message: "商品新增成功",
              type: "success",
            });
            this.$router.replace("/products");
          } else {
            //修改商品信息
            let res = await this.$H.put(`/1.1/classes/classify/${id}`, {
              name,
              french,
              bcname,
              chineseBrief,
              price,
            });
            this.$message({
              message: "商品修改成功",
              type: "success",
            });
            this.$router.replace("/products");
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
};
</script>

<style lang="less" scoped>
.goods-detail {
  margin: 20px 10px 30px 10px;
}

/deep/.el-form-item__content {
  width: 380px;
}
/deep/.avatar-uploader .el-upload {
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
}
</style>